<template>
    <div class="main_body">
      <el-row>
        <el-col :span="1">
            <el-menu class="grid-content bg-purple">
              <el-menu-item
                index="1"
                title="聊天"
              >
                <i class="el-icon-chat-round"></i>
              </el-menu-item>
              <el-menu-item
                index="2"
                title="好友"
              >
                <i class="el-icon-user"></i>
              </el-menu-item>
              <el-menu-item
                index="3"
                title="导航三"
              >
                <i class="el-icon-document"></i>
              </el-menu-item>
              <el-menu-item
                index="4"
                title="设置及其他"
              >
                <i class="el-icon-setting"></i>
              </el-menu-item>
            </el-menu>
        </el-col>
        <el-col :span="liWid">
          <div class="grid-content bg-purple-left">

          </div>
        </el-col>
        <el-col :span="19">
          <div class="grid-content bg-purple-right">

          </div>
        </el-col>
      </el-row>
    </div>
</template>

<script>
  export default {
    name: "Chat",
    data() {
      return {
        liWid: 0,//4
        secondList:[]
      }
    },
    watch:{
      "secondList":{
        handler(newVal,oldVal){
          this.liWid=this.secondList.length>0?4:this.liWid;
        }
      }
    }
  }
</script>

<style scoped>
  .main_body{
    margin: 20px 300px;
  }
  .bg-purple {
    background: #354658;
    min-width:52px
    /*background: #f6f8fa;*/
  }
  .bg-purple-left {
    background: #e5e9f2;
  }
  .bg-purple-right {
    background: #f6f8fa;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 640px;
  }
</style>
